<template>
  <div flex="main:justify cross:center" class="warp"
    style="display:flex; justify-content:space-between; align-item:center; "
  >
    <div>
      <p class="font-title">{{ info.lessonName }}</p>
    </div>
    <div flex="main:left cross:center"
      style="display:flex; justify-content:flex-start; align-item:center; "
    >
      <el-upload
        class="upload-demo"
        ref="upload"
        :multiple="false"
        :show-file-list="false"
        :before-upload="before"
        action="#"
        :auto-upload="true"
        :http-request="upload"
      >
        <el-button
          round
          type="primary" 
          size="small" 
          class="btn_2"
          :loading="load"
          v-if="info.homeworkStatus === 2"
        >
          重新上传
        </el-button>
        <el-button
          round
          type="primary" 
          size="small" 
          class="btn_2"
          :loading="load"
          v-if="info.homeworkStatus === 1"
        >
          上传作业
        </el-button>
      </el-upload>

      <div class="upload-demo">
        <el-popover placement="bottom" title="作业评语" width="200" trigger="hover" 
        :content="info.gradeContent" 
        >
          <template #reference>
            <el-button round type="primary" size="small">查看批阅</el-button>
          </template>
        </el-popover>
      </div>
    
      <p class="score">
        作业评分 <span class="score_A">{{ getScore(info.grade) }}</span>
      </p>
    </div>
   
  </div>
</template>

<script lang="ts" >

import { uploadHomeWork } from '/@/api/studyApi'

export default {
  props: {
    item: Object,
  },
  data() {
    return {
        load:false,
        info:{}
    };
  },
  mounted(){
      this.info = this.item
  },
  methods: {
    before(){
        this.load = true;
    },
    getScore(grade){
        switch (grade){
            case 1:return 'A';
            case 2:return 'B';
            case 3:return 'C';
            case 4:return 'D';
            case 5:return 'E';
            case 6:return 'F';
        }
    },
    submitUpload(){
          this.$refs.upload.submit();
    },
    upload(params) {
    const file = params.file;
    // 根据后台需求数据格式
    const form = new FormData();
    // 文件对象
    form.append("logId", this.info.logId);

    form.append("file", file);

    //form.append("fileName", file.name);

    uploadHomeWrok(form)
      .then((res) => {
        this.$message({
          message: '作业上传成功',
          type: 'success'
        });

        this.info =res.studyProgressLog
        this.load = false;
      })
      .catch(() => {
        this.load = false;
        // xxx
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.warp {
  padding: 20px 0;
  border-bottom: 1px solid rgba(219, 124, 65, 0.1);
}
button {
  margin-right: 20px;
}
.font-second {
  font-size: 16px;
  color: #808080;
  margin-top: 10px;
}
.font-title {
  font-size: 20px;
}
.btn_1 {
  color: #ff5f19;
  border: 1px solid #ff5f19;
}
.btn_2 {
  color: #ffffff;
  background: #00c896;
  border: 1px solid #00c896;
}
.btn_3 {
  color: #ffffff;
  background: #ff5f19;
}
.btn_4 {
  color: #ffffff;
  background: #ffa619;
}
.score {
  color: #808080;
  line-height:26px
}
.score_A {
  color: #ff5f19;
  font-size: 24px;
}
</style>